<script>
import Row from './Row'

import Cell from './Cell'

import { tdSlot, tdSimple } from './util'

export default {
  name: 'TbodyFix',

  components: { Row, Cell },

  inject: ['handlerClickTree', 'cellStyle'],

  props: {
    isTreeType: {
      type: Boolean,
      default: false
    },

    rowHeight: {
      type: Number,
      default: 40
    },

    fixData: {
      type: Array,
      default: () => []
    },

    direction: {
      type: String,
      default: 'left'
    },

    visibleList: {
      type: Array,
      default: () => []
    },

    tHeadHeight: {
      type: Number,
      default: 0
    },

    bodyHeight: {
      type: Number,
      default: 0
    },

    isBottomScroll: {
      type: Boolean,
      default: true
    },

    handlerMousewheel: {
      type: Function
    },

    rowStyle: {
      type: Function
    },

    treeIcon: {
      type: String,
      default: 'arrow'
    },

    currentSelectId: {
      type: String | Number
    },
    leftDistance: {
      type: Number,
      default: 0
    },
    isFarRight: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    this.addMouseEvent()

    this.$nextTick(() => {
      const bodyFixWrap = this.$refs.bodyFixWrap
      if (this.direction === 'left') {
        bodyFixWrap.style.left = '0'
      } else {
        bodyFixWrap.style.right = '17px'
      }
    })
  },

  methods: {
    /*
      + 兼容问题（火狐与谷歌）
    */
    addMouseEvent() {
      if (navigator.userAgent.indexOf('Firefox') > -1) {
        this.$refs.tBodyFix.addEventListener('DOMMouseScroll', this.handlerMousewheel)
      } else {
        this.$refs.tBodyFix.addEventListener('mousewheel', this.handlerMousewheel)
      }
    },

    handlerClick(row) {
      this.handlerClickTree(row)
    }
  },

  computed: {
    tableWidth() {
      let width = 0
      for (let i = 0, len = this.fixData.length; i < len; i++) {
        const current = this.fixData[i]
        if (current.width) {
          width = width + current.width
        } else {
          width = width + 150
        }
      }
      return width
    }
  },

  render(h) {
    const bodyFixWrapStyle = {
      top: this.tHeadHeight + 'px',
      height: this.isBottomScroll ? this.bodyHeight - 16 + 'px' : this.bodyHeight,
      boxShadow:
        (this.leftDistance > 0 && this.direction === 'left'
          ? '6px -3px 6px -4px rgba(0,0,0,.2)'
          : '') ||
        (this.isFarRight && this.direction === 'right' ? '' : '-6px -3px 6px -4px rgba(0,0,0,.2)')
    }

    const tBodyFixStyle = { width: this.tableWidth + 'px' }

    return (
      <div
        class="t-body-fix-wrap"
        ref="bodyFixWrap"
        style={bodyFixWrapStyle}
        onMousewheel={this.handlerMousewheel}
      >
        <table class="t-body-fix" ref="tBodyFix" style={tBodyFixStyle}>
          {this.visibleList.map(row => {
            return (
              <Row
                id={row.id}
                key={row.id}
                currentSelectId={this.currentSelectId}
                rowStyle={this.rowStyle}
                row={row.data}
                index={row.index}
              >
                {this.fixData.map((colConfig, colIndex) => {
                  if (colConfig.slot) {
                    return tdSlot(h, {
                      row,
                      colConfig,
                      colIndex,
                      isTreeType: this.isTreeType,
                      rowHeight: this.rowHeight,
                      direction: this.direction,
                      cellStyle: this.cellStyle
                    })
                  } else {
                    return tdSimple(h, {
                      row,
                      colConfig,
                      colIndex,
                      treeIcon: this.treeIcon,
                      isTreeType: this.isTreeType,
                      rowHeight: this.rowHeight,
                      handlerClick: this.handlerClick,
                      cellStyle: this.cellStyle
                    })
                  }
                })}
              </Row>
            )
          })}
        </table>
      </div>
    )
  }
}
</script>

<style scoped>
.t-body-fix-wrap {
  position: absolute;
  overflow-y: hidden;
}

.t-body-fix {
  border-collapse: collapse;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  table-layout: fixed;
}
.t-body-fix td {
  padding: 0;
  position: relative;
}
.t-body-fix .td-div {
  width: 100%;
  height: 100%;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.t-body-fix .td-div .tree-arrow {
  cursor: pointer;
}
</style>
